<template>
  <div
    id="PostPage"
    class="fixed lg:flex justify-between z-50 top-0 left-0 w-full h-full bg-black lg:overflow-hidden overflow-auto"
  >
    <div v-if="$generalStore.selectedPost" class="lg:w-[calc(100%-540px)] h-full relative">
      <NuxtLink
        :to="$generalStore.isBackUrl"
        class="absolute z-20 m-5 rounded-full bg-gray-700 p-1.5 hover:bg-gray-800"
      >
        <Icon name="icon-guanbi" color="#FFFFFF" size="27"/>
      </NuxtLink>

      <div v-if="($generalStore.ids.length > 1)">
        <button
          :disabled="!isLoaded"
          @click="loopThroughPostsUp()"
          class="absolute z-20 right-4 top-4 flex items-center justify-center rounded-full bg-gray-700 p-1.5 hover:bg-gray-800"
        >
          <Icon name="icon-up" size="30" color="#FFFFFF"/>
        </button>

        <button
          :disabled="!isLoaded"
          @click="loopThroughPostsDown()"
          class="absolute z-20 right-4 top-20 flex items-center justify-center rounded-full bg-gray-700 p-1.5 hover:bg-gray-800"
        >
          <Icon name="icon-down" size="30" color="#FFFFFF"/>
        </button>
      </div>

      <img
        class="absolute top-[18px] left-[70px] rounded-full lg:mx-0 mx-auto z-999"
        width="45"
        src="~/assets/images/tiktok-logo-small.png"
      >
      <div v-if="$generalStore.selectedPost.video" class="lg:w-[100%] h-full relative">
        <XgVideo :url="$generalStore.selectedPost.video"></XgVideo>
      </div>
      <!--      <video-->
      <!--        v-if="$generalStore.selectedPost.video"-->
      <!--        class="absolute object-cover w-full my-auto z-[-1] h-screen"-->
      <!--        :src="$generalStore.selectedPost.video"-->
      <!--      />-->

      <div
        v-if="!isLoaded"
        class="flex items-center justify-center bg-black bg-opacity-70 h-screen lg:min-w-[480px]"
      >
        <Icon class="animate-spin ml-1" name="icon-load-c" size="100" color="#FFFFFF"/>
      </div>
      <div class="bg-black bg-opacity-70 lg:min-w-[480px]">


        <!--        <video-->
        <!--          v-if="$generalStore.selectedPost.video"-->
        <!--          ref="video"-->
        <!--          loop-->
        <!--          muted-->
        <!--          class="h-screen mx-auto"-->
        <!--          :src="$generalStore.selectedPost.video"-->
        <!--        />-->
      </div>

    </div>

    <div
      id="InfoSection"
      v-if="$generalStore.selectedPost"
      class="lg:max-w-[550px] relative w-full h-full bg-white"
    >

      <div class="py-7"/>

      <div class="flex items-center justify-between px-8">
        <div class="flex items-center">
          <NuxtLink :to="`/profile/${$generalStore.selectedPost.user.id}`">
            <img
              class="rounded-full lg:mx-0 mx-auto"
              width="40"
              :src="$generalStore.selectedPost.user.image"
            >
          </NuxtLink>
          <div class="ml-3 pt-0.5">
            <div class="text-[17px] font-semibold">
              {{ $generalStore.selectedPost.user.name |allLowerCaseNoCaps }}
            </div>
            <div class="text-[13px] -mt-5 font-light">
              {{ $generalStore.selectedPost.user.name }}
              <span class="relative -top-[2px] text-[30px] pr-0.5 ">.</span>
              <span class="font-medium">{{ $generalStore.selectedPost.created_at }}</span>
            </div>
          </div>
        </div>

        <Icon
          v-if="$userStore.id === $generalStore.selectedPost.user.id"
          @click.native="deletePost()"
          class="cursor-pointer"
          name="icon-delete"
          size="30"
        />
      </div>

      <div class="px-8 mt-4 text-sm">{{ $generalStore.selectedPost.text }}</div>

      <div class="px-8 mt-4 text-sm font-bold">
        <Icon name="icon-yinle" size="17" style="display: inline;"/>
        original sound - {{ $generalStore.selectedPost.user.name }}
      </div>

      <div class="flex items-center px-8 mt-8">
        <div class="pb-4 text-center flex items-center">
          <button
            @click="isLiked ? unlikePost() : likePost()"
            class="rounded-full bg-gray-200 p-2 cursor-pointer"
          >
            <Icon
              name="icon-yidianzan"
              size="25"
              :color="isLiked ? '#F02C56' : ''"
            />
          </button>
          <span class="text-xs pl-2 pr-4 text-gray-800 font-semibold">
               {{ $generalStore.selectedPost.likes.length }}
          </span>
        </div>

        <div class="pb-4 text-center flex items-center">
          <div class="rounded-full bg-gray-200 p-2 cursor-pointer">
            <Icon name="icon-pinglun1" size="22"/>
          </div>
          <span class="text-xs pl-2 text-gray-800 font-semibold">43</span>
        </div>
      </div>

      <div
        id="Comments"
        class="bg-[#F8F8F8] z-0 w-full h-[calc(100%-273px)] border-t-2 overflow-auto"
      >

        <div class="pt-2"/>

        <div
          class="text-center mt-6 text-xl text-gray-500"
          v-if="($generalStore.selectedPost.comments.length < 1)"
        >
          No comments...
        </div>

        <div
          v-else
          v-for="(comment,index) in $generalStore.selectedPost.comments"
          :key="index"
          class="flex items-center justify-between px-8 mt-4"
        >
          <div class="flex items-center relative w-full">
            <NuxtLink :to="`/profile/${comment.user.id}`">
              <img
                class="absolute top-0 rounded-full lg:mx-0 mx-auto"
                width="40"
                :src="comment.user.image"
              >
            </NuxtLink>
            <div class="ml-14 pt-0.5 w-full">
              <div class="text-[18px] font-semibold flex items-center justify-between">
                {{ comment.user.name }}
                <Icon
                  v-if="$userStore.id === comment.user.id"
                  @click.native="deleteComment($generalStore.selectedPost, comment.id)"
                  class="cursor-pointer"
                  name="icon-delete"
                  size="30"
                />
              </div>
              <div class="text-[15px] font-light">
                {{ comment.text }}
              </div>
            </div>
          </div>
        </div>

        <div class="mb-28"/>

      </div>

      <div
        id="CreateComment"
        v-if="$userStore.id"
        class="absolute flex items-center justify-between bottom-0 bg-white h-[85px] lg:max-w-[550px] w-full py-5 px-8 border-t-2"
      >
        <div
          :class="inputFocused ? 'border-2 border-gray-400' : 'border-2 border-[#F1F1F2]'"
          class="bg-[#F1F1F2] flex items-center rounded-lg w-full lg:max-w-[420px]"
        >
          <input
            v-model="comment"
            @keyup.enter="addComment()"
            @focus="inputFocused = true"
            @blur="inputFocused = false"
            class="bg-[#F1F1F2] text-[14px] focus:outline-none w-full lg:max-w-[420px] p-2 rounded-lg"
            type="text"
            placeholder="Add comment..."
          >
        </div>
        <button
          :disabled="!comment"
          @click="addComment()"
          :class="comment ? 'text-[#F02C56] cursor-pointer' : 'text-gray-400'"
          class="font-semibold text-sm ml-5 pr-1"
        >
          Post
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      video: null,
      isLoaded: false,
      comment: null,
      inputFocused: false
    }
  },
  middleware: ['auth'],
  filters: {
    allLowerCaseNoCaps(str) {
      return str.split(' ').join('').toLowerCase()
    },
  },
  async mounted() {
    this.$store.commit('general/change_selectedPost')
    try {
      await this.$store.dispatch('general/getPostById', this.$route.params.id)
    } catch (error) {
      if (error && error.response && error.response.status === 400) {
        await this.$router.push('/')
      }
    }
    this.video = this.$refs.video


    setTimeout(() => {
      this.isLoaded = true
    }, 500)

    // this.video.addEventListener('canplay', (e) => {
    //   if (e.target) {
    //     setTimeout(() => {
    //       this.isLoaded = true
    //     }, 500)
    //   }
    // });
  },
  beforeDestroy() {
    if (this.video) {
      this.video.pause();
      this.video.currentTime = 0;
      this.video.src = '';
    }
  },
  watch: {
    isLoaded: {
      handler(newVal) {
        if (newVal) {
          // setTimeout(() => this.video.play(), 500)
        }
      }, immediate: true
    }
  },
  computed: {
    $generalStore() {
      return this.$store.state.general
    },
    $userStore() {
      return this.$store.state.user
    },
    $profileStore() {
      return this.$store.state.profile
    },
    isLiked() {
      let res = this.$generalStore.selectedPost.likes.find(like => like.user_id === this.$userStore.id)
      if (res) {
        return true
      }
      return false
    }
  },
  methods: {
    loopThroughPostsUp() {
      try {
        setTimeout(() => {
          let isBreak = false
          for (let i = 0; i < this.$generalStore.ids.length; i++) {
            const id = this.$generalStore.ids[i];
            if (id > this.$route.params.id) {
              this.$router.push(`/post/${id}`)
              isBreak = true
              return
            }
          }
          if (!isBreak) {
            this.$router.push(`/post/${this.$generalStore.ids[0]}`)
          }
        }, 300)
      }catch (e) {

      }
    },
    loopThroughPostsDown() {
      try {
        setTimeout(() => {
          this.$store.commit('general/reverse')
          let idArrayReversed = this.$generalStore.ids
          let isBreak = false
          for (let i = 0; i < idArrayReversed.length; i++) {
            const id = idArrayReversed[i];
            if (id < this.$route.params.id) {
              this.$router.push(`/post/${id}`)
              isBreak = true
              return
            }
          }
          if (!isBreak) {
            this.$router.push(`/post/${idArrayReversed[0]}`)
          }
        }, 300)
      }catch (e) {

      }
    },
    async deletePost() {
      let res = confirm('Are you sure you want to delete this post?')
      try {
        if (res) {
          await this.$store.dispatch('user/deletePost', this.$generalStore.selectedPost)
          await this.$store.dispatch('profile/getProfile', this.$userStore.id)
          await this.$router.push(`/profile/${this.$userStore.id}`)
        }
      } catch (error) {
        console.log(error)
      }
    },
    async likePost() {
      try {
        await this.$store.dispatch('user/likePost', {post: this.$generalStore.selectedPost, isPostPage: true})
      } catch (error) {
        console.log(error)
      }
    },
    async unlikePost() {
      try {
        await this.$store.dispatch('user/unlikePost', {post: this.$generalStore.selectedPost, isPostPage: true})
      } catch (error) {
        console.log(error)
      }
    },
    async deleteComment(post, commentId) {
      let res = confirm('Are you sure you want to delete this comment?')
      try {
        if (res) {
          await this.$store.dispatch('user/deleteComment', {post, commentId})
        }
      } catch (error) {
        console.log(error)
      }
    },
    async addComment() {
      if(!this.comment) return;
      try {
        await this.$store.dispatch('user/addComment', {post: this.$generalStore.selectedPost, comment: this.comment})
        this.comment = null
        document.getElementById('Comments').scroll({top: 0, behavior: 'smooth'});
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>
